<template>
  <div class="modeleWrap">
    <!-- <myForm mode="dialog" type="add" @submitOk='onFormSure'>
      <el-button class="f-mb15" type="info">我是按钮</el-button>

    </myForm> -->
    <!-- <tabs class="tab_cont" :active.sync="data.active"
      :items='[{ name: "春季", value: "1" }, { name: "夏季", value: "2" }]' default-class='itemDefault'
      checked-class='itemCheck' @change='onChange'>
    </tabs> -->
    <k-expand class="expand_cont" :show.sync="data.expandFlag">
      <template v-slot:normalText>展开</template>
      <template v-slot:expandText>收起</template>
      <template v-slot:normal><span></span></template>
      <template v-slot:expand>2222</template>
    </k-expand>
  </div>
</template>

<script>
import tabs from "/src/tool/component/tabs.vue"
import myForm from "/src/components/myForm.vue"
import kExpand from "/src/tool/component/k-expand.vue"
export default {
  components: { myForm, tabs, kExpand },
  props: {

    value: {  //对象
      type: Object,
      default: () => {
        return {a:1111};
      }
    },

  },
  data() {
    return {
      data: {
        active: "2",
      expandFlag: true,

      }
    }
  },
  created() { },
  mounted() { },
  methods: {
     onChange () {
      console.log(11111, this.data.active)
    },
    onFormSure() {
      console.log("我是按钮")
    }
  },
  watch: {
    value: {
      handler(val) {
        //监听value的变化
        console.log(11111, val)
      },
      deep: true,
      immediate: true
    }
  },
  computed: {

  },
}
</script>
<style >
.tab_cont {

  .itemDefault,
  .itemCheck {
    width: 120px;
    height: 70px;
    text-align: center;
    cursor: pointer;

  }
}

.tab_cont .itemDefault {
  background: blue;
}

.tab_cont .itemCheck {
  background: #f00;
}

 /* 顺序用于插入不同icon. */
.tab_cont .itemDefault:nth-child(2) {

 }
 
</style>